<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 800px;
      margin: 30px auto;
      border-radius: 4px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
      padding: 16px;
    }

    .container h2 {
      margin: 20px 0;
    }

    .demo-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .pagination-demo {
      display: flex;
      white-space: nowrap;
      align-items: center;
    }

    .pagination-demo>* {
      margin-bottom: 0;
    }

    .pagination-demo>span {
      margin-right: 10px;
    }

    .pagination-demo xy-input {
      width: 50px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Table 表格控件</h2>
    <fy-table class="table" thead="Name,Age,Address" select>
      <fy-tr>
        <fy-td>3423</fy-td>
        <fy-td>32</fy-td>
        <fy-td>s d v s d</fy-td>
      </fy-tr>
      <fy-tr>
        <fy-td>dfgdfg</fy-td>
        <fy-td>42</fy-td>
        <fy-td>xcgdfg</fy-td>
      </fy-tr>
      <fy-tr>
        <fy-td>dfgfdg</fy-td>
        <fy-td>42</fy-td>
        <fy-td>dfgdfg</fy-td>
      </fy-tr>
      <fy-tr>
        <fy-td>dfgfd</fy-td>
        <fy-td>42</fy-td>
        <fy-td>fdgdfg</fy-td>
      </fy-tr>
      <fy-tr>
        <fy-td>Jfdgf</fy-td>
        <fy-td>42</fy-td>
        <fy-td>dfgfdg</fy-td>
      </fy-tr>
    </fy-table>
  </div>
  <div class="container">
    <h2>Tabs 选项卡</h2>
    <fy-tab>
      <fy-tab-content label="tab1">tab1</fy-tab-content>
      <fy-tab-content label="tab2">tab2</fy-tab-content>
      <fy-tab-content label="tab3">tab3</fy-tab-content>
    </fy-tab>
  </div>
  <div class="container">
    <h2>Tabs 选项卡禁用</h2>
    <fy-tab>
      <fy-tab-content label="tab1">tab1</fy-tab-content>
      <fy-tab-content label="tab2" disabled>tab2</fy-tab-content>
      <fy-tab-content label="tab3">tab3</fy-tab-content>
    </fy-tab>
  </div>
  <div class="container">
    <h2>Tabs 选项卡跳转</h2>
    <fy-tab activekey="B">
      <fy-tab-content label="tab1" key="A">tab1</fy-tab-content>
      <fy-tab-content label="tab2" key="B">tab2</fy-tab-content>
      <fy-tab-content label="tab3" key="C">tab3</fy-tab-content>
    </fy-tab>
    <fy-button type="primary" onclick="this.previousElementSibling.activekey='C'">跳转tab3</fy-button>
  </div>
  <div class="container">
    <h2>Tabs 选项卡图标</h2>
    <fy-tab>
      <fy-tab-content label="home" icon="home">tab1</fy-tab-content>
      <fy-tab-content label="message" icon="message">tab2</fy-tab-content>
      <fy-tab-content label="user" icon="user">tab3</fy-tab-content>
    </fy-tab>
  </div>

  <div class="container">
    <h2>分页</h2>
    <fy-pagination pagesize="3" total="50"></fy-pagination>
  </div>
  <div class="container">
    <h2>分页 简约模式</h2>
    <fy-pagination simple pagesize="3" total="50"></fy-pagination>
  </div>
  <div class="container">
    <h2>分页2</h2>
    <div class="pagination-demo">
      <fy-pagination id="pagination-demo" onchange="FyMessage.info('当前页: '+this.current)" pagesize="10" total="200">
      </fy-pagination>
      <fy-select defaultvalue="10" onchange="document.getElementById('pagination-demo').pagesize=this.value">
        <fy-option value="10">每页10条</fy-option>
        <fy-option value="15">每页15条</fy-option>
        <fy-option value="20">每页20条</fy-option>
      </fy-select>
      <span>跳转</span>
      <fy-input type="number" defaultvalue="1" min="1"
        onchange="document.getElementById('pagination-demo').current = this.value"></fy-input><span>页</span>
    </div>
  </div>
  <div class="container">
    <h2>Collapse 折叠面板</h2>
    <div class="collapse" data-collapse-active="2">
      <div data-collapse-name="折叠面板1" data-collapse-key="1">
        折叠内容
      </div>
      <div data-collapse-name="折叠面板2" data-collapse-key="2">
        折叠内容
      </div>
      <div data-collapse-name="折叠面板3" data-collapse-key="3">
        折叠内容
      </div>
      <div data-collapse-name="折叠面板4" data-collapse-key="4">
        折叠内容
      </div>
    </div>
  </div>

  <div class="container">
    <h2>Carousel 走马灯</h2>
    <div class="carousel">
      <div class="carousel-panel">
        <div class="demo-panel">0</div>
      </div>
      <div class="carousel-panel">
        <div class="demo-panel">1</div>
      </div>
      <div class="carousel-panel">
        <div class="demo-panel">2</div>
      </div>
      <div class="carousel-panel">
        <div class="demo-panel">3</div>
      </div>
    </div>
  </div>
  <div class="container">
    <h2>Tree 树形控件</h2>
    <div class="tree"></div>
  </div>
  <div class="container">
    <h2>Table 表格控件</h2>

    <div class="table" data-tab-active="2" data-tab-disabled="3">
      <div data-tab-name="选项卡1" data-tab-key="1">内容1</div>
      <div data-tab-name="选项卡2" data-tab-key="2">内容2</div>
      <div data-tab-name="选项卡3" data-tab-key="3">内容3</div>
      <div data-tab-name="选项卡4" data-tab-key="4">内容4</div>
    </div>
  </div>
</body>

</html>